<!-- 
弹性布局：子项属性
    flex
        给子容器分配剩余空间，
        数值，表示所占份数，默认0
        百分比，参照父容器宽度
        注意：父容器宽度不是固定的，要改为百分比，如此，子容器才会自动调整
    align-self
        * 允许【侧轴上】某个子项设置自身独立的排列方式（子容器独立对齐），可覆盖align-tiems属性（父容器统一对齐）
        - auto，默认的，表示继承父容器align-items的属性，若没有父容器，则等同于stretch拉伸
        - center
        - flex-start、flex-end
        - stretch
    order
        子项前后排列顺序，用于改变子容器的html默认结构顺序
        数值越小越靠前（可以负数），默认0
 -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* ------------------------ */
    section {
        /* 布局模式 */
        display: flex;
        /* 宽度百分比 */
        width: 75%;
        height: 200px;
        margin: 0 auto;
        background-color: cyan;
    }
    div {
        background-color: blue;
        color: #fff;
    }
    div:first-child,
    div:last-child {
        width: 150px;
    }
    div:nth-child(2) {
        /* 父宽800px，左右各占150px，剩余空间为500px，只分配成1份，故为500px */
        flex: 1;
        background-color: skyblue;
    }

    /* ------------------------ */
    p {
        display: flex;
        width: 75%;
        height: 200px;
        margin: 100px auto;
        background-color: cyan;
    }
    /* 整个宽度均分为5等分（左右两个元素各占1份，中间一个元素占3份，合计2*1+1*3=5份） */
    p span {
        flex: 1;
    }
    p span:nth-child(2) {
        flex: 3;
        background-color: skyblue;
    }

    /* ------------------------ */
    h4 {
        display: flex;
        flex-flow: row nowrap;
        /* 父容器统一对齐 */
        align-items: flex-end;
        width: 75%;
        height: 200px;
        margin: 0 auto;
        background-color: cyan;
    }
    h4 span {
        width: 50px;
        height: 50px;
        background-color: red;
    }
    h4 span:nth-child(2n) {
        /* 子容器单独对齐 */
        align-self: flex-start;
    }
    h4 span:nth-child(3) {
        order: -1;
    }
</style>

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>

<h4>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</h4>
